<template>
  <div>
    <div class="operate-head">
      <div class="operate-head-item-box">
        <div class="operate-head-title">图片（共12条）</div>
        <img src="" />
        <img src="" />
      </div>
      <div class="operate-head-item-box">
        <mu-paper
          :z-depth="1"
          :class="['h_search', hSearchOn ? 'h_search-on' : '']"
          @click="hSearchOn = true"
          v-click-outside="closeSearch"
        >
          <a-input
            size="large"
            v-model="menuChecked.title"
            :allowClear="true"
            @pressEnter="onSearch"
            @change="searchInput"
          >
            <a-icon
              class="search-icon"
              slot="prefix"
              type="search"
              @click="onSearch"
            />
          </a-input>
        </mu-paper>
        <mu-button class="operate-head-btn">上传图片</mu-button>
      </div>
    </div>
    <div class="content">
      <div class="content-group">
        <div class="content-group-box">
          <div class="content-group-title">分组</div>
          <div class="content-group-item-box">
            <div class="content-group-item">最近使用（0）</div>
            <div class="content-group-item content-group-item-actived">
              我的图片（10）
            </div>
            <div class="content-group-item">全部图片（12）</div>
            <div class="content-group-item">未分组（2）</div>
            <div class="content-group-item">文章配图（10）</div>
          </div>
        </div>
        <div class="content-group-operate">
          <div class="content-group-operate-btn">+</div>
          <div>新建</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hSearchOn: false,
      menuChecked: {
        title: "",
      },
    };
  },
  methods: {
    searchInput() {},
    closeSearch() {},
    onSearch() {},
  },
};
</script>

<style scoped lang="scss">
.operate-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  margin-bottom: 20px;
}
.operate-head-item-box {
  display: flex;
  align-items: center;
}

.operate-head-title {
  font-size: 18px;
  color: #444;
}

.operate-head-btn {
  width: 115px;
  height: 38px;
  background-color: #4972f1;
  border-radius: 3px;
  color: white;
  box-shadow: none;
}

.content {
  padding: 36px 24px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid rgba(238, 238, 238, 1);
}

.content-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-group-box {
  display: flex;
  align-items: center;
}

.content-group-title {
  color: #374052;
  font-size: 16px;
  margin-right: 37px;
}

.content-group-item-box {
  display: flex;
  align-items: center;
}

.content-group-item {
  cursor: pointer;
  color: #a5a5a5;
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}

.content-group-operate {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #8797b4;
}

.content-group-operate-btn {
  padding: 5px;
  border: 1px solid #7c8dad;
  border-radius: 4px;
  margin-right: 10px;
  line-height: 1;
}

.content-group-item-actived {
  padding: 5px 5px 5px 10px;
  border: 1px solid #4972f1;
  border-radius: 17px;
  color: #7f9fff;
}

.h_search {
  width: 220px;
  border-radius: 20px;
  box-shadow: 0 1px 6px 0px rgba(14, 23, 38, 0.05);
  margin-right: 18px;

  input {
    &:focus {
      box-shadow: 0 1px 6px 0px rgba(14, 23, 38, 0.05);
    }
    border: none;
    border-radius: 20px;
  }
}

.h_search-on {
  .search-icon {
    color: #3366ff;
  }
}
</style>
